<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form>
          <div class="filter-container">
            <el-form-item>
              <!-- 左侧搜索 -->
              <span class="txt" style="width: 80px;">学科名称</span>
              <el-input
                style="width: 172.5px;margin-right: 10px;"
                class="filter-item"
                v-model="form.subjectName"
              ></el-input>
              <el-button class="filter-item" size="small" @click="resetForm">清除</el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="handleFilter"
              >搜索</el-button>
              <!-- 右侧添加 -->
              <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              @click="handleCreate"
              type="success"
              icon="el-icon-edit"
            >新增学科</el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          :title="alertText"
          type="info"
          class="alert"
          show-icon
          :closable="false"
        >
        </el-alert>
        <!-- 表格 -->
        <el-table
          :data="dataList"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column label="学科名称" prop="subjectName"></el-table-column>
          <el-table-column align="left" label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate|parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="前台是否显示">
            <template slot-scope="scope">
              <span>{{scope.row.isFrontDisplay===1?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="二级目录">
            <template slot-scope="scope">
              <span>{{scope.row.twoLevelDirectory}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="标签">
            <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="题目数量">
            <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column label="操作" width="240px">
             <template #default="{ row }">
              <el-button type="text"
               @click="$router.push(`directorys?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`)">学科分类</el-button>
              <el-button type="text"
               @click="$router.push(`tags?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`)">学科标签</el-button>
              <el-button type="text" @click="handleCreate(row)">修改</el-button>
              <el-button type="text" @click="delSubject(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination">
          <PageTool
            :paginationPage="form.page"
            :paginationPagesize="form.size"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
      </el-card>
      <!-- 新增标签弹层 -->
        <SubjectsAdd
        @close-dialog="closeDialog"
        ref="subjectsadd"
        :detail="detail"
        :show-dialog="showDialog"
        @upList="upList"
        >
        </SubjectsAdd>
    </div>
  </div>
</template>

<script>
import PageTool from '../components/page-list.vue'
import SubjectsAdd from '../components/subjects-add.vue'
import { list, remove } from '@/api/hmmm/subjects.js'

export default {
  name: 'SubjectsList',
  components: {
    PageTool,
    SubjectsAdd
  },
  data () {
    return {
      form: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      dataList: [],
      total: 0,
      alertText: '',
      showDialog: false,
      detail: {
        isFrontDisplay: true
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList () {
      const res = await list(this.form)
      // console.log(res.data)
      // console.log(res.data.items)
      this.dataList = res.data.items
      this.total = res.data.counts
      this.alertText = `数据一共 ${this.total} 条`
    },
    // 搜索
    handleFilter () {
      console.log('点击了')
      this.form.page = 1
      this.getList(this.form.subjectName)
    },
    // 清除
    resetForm () {
      this.form = {
        namsubjectNamee: '',
        page: 1,
        pagesize: 10
      }
    },
    // 打开 新增|修改 对话框
    handleCreate (dataList) {
      // console.log(dataList)
      this.showDialog = true
      if (!dataList.id) {
        this.detail = {}
      } else {
        this.detail = dataList
      }
      this.$nextTick(() => {
        this.$refs.subjectsadd.open()
      })
    },
    // 新增学科后更新列表
    // 进入某一页
    handleCurrentChange (val) {
      this.form.page = val
      this.getList()
    },
    currentChange (page) {
      console.log(page)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.getList()
      }
    },
    closeDialog () {
      this.showDialog = false
    },
    // 新增|修改 后更新列表
    upList () {
      if (!this.detail.id) {
        this.form.page = 1
      }
      this.getList()
    },
    // 删除学科
    async delSubject (dataList) {
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(dataList)
      this.$message.success('删除成功')
      this.form.page = 1
      this.getList({

      })
    }
  }
}
</script>

<style scoped>
.app-container {
    padding: 1px;
}
::v-deep .txt{
  text-align: right;
  vertical-align: middle;
  float: left;
  font-weight: 700;
  font-size: 14px;
  color: #606266;
  line-height: 32px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.alert {
  margin-bottom: 15px;
}
.filter-container{
  height: 50px;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}

</style>
